<template>
  <div>
    <div class="common_title">
        <span style="font-size:20px;font-weight:bold">数据上传</span>
      </div>
    <!-- 查询框 -->
    <div class="query_bg">
        <!-- 上传 -->
        <span class="query_bg_addData" style="margin-left:20px">
            <el-button type="goon" icon="el-icon-upload2" @click="uploadClick" :size="size">上传</el-button>
        </span>
        <div class="grid-content bg-purple-light"></div>
    </div>
    <!-- 数据列表框 -->
    <div  class="dataList_bg">
      <div class="dataList">
        <el-table ref="multipleTable" size="size" :data="tableData" tooltip-effect="dark" style="width: 98%" :default-sort = "{prop: 'id', order: 'descending'}" border>
            <!-- <el-table-column type="selection" width="55">
            </el-table-column> -->
            <el-table-column prop="id" label="序号" sortable header-align="center" align="center" width="120">
              <template slot-scope="scope">
                <span>{{(page - 1) * perPage + scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="fileName" label="文件名" header-align="center" align="center" width="300"> </el-table-column> 
            <el-table-column prop="type" label="数据类型" header-align="center" align="center"> </el-table-column>
            <el-table-column prop="source" label="数据来源" header-align="center" align="center"> </el-table-column>
            <el-table-column prop="userName" label="用户名"  header-align="center" align="center"> </el-table-column> 
            <el-table-column prop="dateTime" label="上传时间"  header-align="center" align="center"> </el-table-column> 
            <el-table-column prop="" label="操作" width="300" show-overflow-tooltip header-align="center" align="center">
                <template slot-scope="scope">
                  <el-button round size="mini" @click="editRoleClick(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="block" style="width:98%;text-align:right;margin-top:10px">
          <el-pagination @size-change="handleperPageChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 50]"
          :page-size="perPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          ></el-pagination>
      </div>
      <!--查看界面-->
      <el-dialog title="数据详情" width="40%" :visible.sync="dialogVisible">
        <el-form :model="dataForm" label-width="180px" ref="dataForm" :size="size">
            <!-- <el-form-item label="序号：" prop="id" style="margin-left:10px">
                <div style="width:300px;">{{dataForm.id}}</div>
            </el-form-item> -->
            <el-form-item label="文件名：" prop="fileName" style="margin-left:10px">
                <div style="width:300px;">{{dataForm.fileName}}</div>
            </el-form-item>
            <el-form-item label="数据类型：" prop="type" style="margin-left:10px">
                <!-- <el-input v-model="dataForm.dataType" style="width:300px;"></el-input> -->
                <div style="width:300px;">{{dataForm.type}}</div>
            </el-form-item>
            <el-form-item label="数据来源：" prop="source" style="margin-left:10px">
                <!-- <el-input v-model="dataForm.dataSource" style="width:300px;"></el-input> -->
                <div style="width:300px;">{{dataForm.source}}</div>
            </el-form-item>
            <el-form-item label="用户名" prop="userName" style="margin-left:10px">
                <!-- <el-input v-model="dataForm.operator" style="width:300px;"></el-input> -->
                <div style="width:300px;">{{dataForm.userName}}</div>
            </el-form-item>
            <el-form-item label="上传时间" prop="dateTime" style="margin-left:10px">
                <!-- <el-input v-model="dataForm.status" style="width:300px;"></el-input> -->
                <div style="width:300px;">{{dataForm.dateTime}}</div>
            </el-form-item>
        </el-form>

        <!-- <div slot="footer" class="dialog-footer">
            <el-button :size="size" @click.native="dialogVisible = false">取消</el-button>
            <el-button :size="size" type="primary"  @click="submitForm()">提交</el-button>
        </div> -->
      </el-dialog>
      <!-- 上传 -->
      <el-dialog title="上传文件" width="50%" :visible.sync="dialogImport">
        <el-form :model="form" :rules="rules">
          <el-form-item label="数据来源" prop="source" :label-width="formLabelWidth">
            <el-input v-model="form.source" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="数据类型" prop="type" :label-width="formLabelWidth">
            <el-select v-model="form.type" placeholder="请选择活动区域">
              <el-option label="商品数据" value="商品数据"></el-option>
              <el-option label="经济数据" value="经济数据"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item  label="文件上传" prop="file" :label-width="formLabelWidth">
            <el-upload class="upload-demo"  drag multiple  accept=".xls,.xlsx" :action="UploadUrl()" :before-upload="beforeUploadFile" :limit="1" :on-exceed="handleExceed" 
            :on-change="handleChange" :on-remove="handleRemove" :auto-upload="false" :file-list="fileList">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传 xls / xlsx 文件，且不超过3G</div>
            </el-upload>
          </el-form-item>
        </el-form>
        
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogImport = false">取 消</el-button>
          <el-button type="primary" @click="importSureClick">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>

export default {
  data() {
      return {
        size: "small",
        value: '',
        input: '',
        input1: '',
        page: 1, //当前页
        perPage: 10, //每页多少条数据
        total: 4, //总共多少条数据
        startUseValue:true,
        tableData: [],
        dialogVisible: false,
        dataForm:{
            id: '',
            fileName: '',
            type:"",
            source:"",
            userName: "",
            dateTime: '',
        },
        dialogImport: false,
        form: {
          source: '',
          type: '',
          file: '',
        },
        formLabelWidth: '100px',
        fileList:[],
        rules: { 
          source: [
              { required: true, message: '请填入数据来源', trigger: 'blur' }
          ],
          type: [
              { required: true, message: '请选择数据类型', trigger: 'change' }
          ],
          file: [
              { required: true, message: '请上传文件', trigger: 'blur' }
          ],
        },
      }
    },
    methods: {
       //获取表格数据
      getData() {
        this.$api.importData.getUploadLogs(this.page,this.perPage).then(res => {
          console.log("importData:",res)
          this.tableData = res.data.tUploadLogList;
          this.total = res.data.count;
        });
      },
      //改变每页多少条数据
      handleperPageChange(val) {
        this.perPage = val
        this.getData()
      },
      // 分页
      handleCurrentChange(val) {
        this.page = val
        this.getData()
      },
       // 搜索
      searchClick() {
        if (this.input == "") {
            this.$alert('输入内容不能为空', '提示', {
                confirmButtonText: '确定',
                type: 'warning',
                callback: action => {}
            });
        } else {
            console.log("搜索内容");
        }
      },
      // 数据上传
      uploadClick() {
        console.log("上传")
        this.dialogImport = true
        this.fileList = []
        this.form= {
          source: '',
          type: '',
          file: ''
        }
      },
      // 数据上传》确定
      importSureClick() {
        if(this.fileList.length === 0){
          return this.$message.warning('请先选择要上传的文件');
        }
        console.log(this.fileList);
        // 把文件转成FormData格式上传
        let form = new FormData();
        console.log("file:", this.fileList[0]);
        form.append("file", this.fileList[0]);
        form.append("source", this.form.source);
        form.append("type", this.form.type);

        if(this.form.type == "商品数据") {
          console.log("from:",form);
          this.loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          this.$api.importData.commodityData(form).then(res =>{
            console.log(res)
            if(res.code != 200 ){
              return this.$message.error(res.msg)
              this.loading.close();
            }
            this.$message.success('上传成功')
            this.getData();
            this.dialogImport = false
            this.fileList = []
          })
        } else {
          this.$api.importData.economyData(form).then(res =>{
            console.log(res)
            if(res.code != 200 ){
                return this.$message.error(res.msg)
            }
            this.$message.success('上传成功')
            this.getData();
            this.dialogImport = false
            this.fileList = []
          })
        }
        
      },
      // 数据查看
      editRoleClick(row) {
        this.dialogVisible = true;
        console.log(row);
        this.dataForm = Object.assign({}, row);
      },
      // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
      beforeUploadFile(file) {
        let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
        let size = file.size / 1024 / 1024;
        if(extension !== 'xlsx' && extension !== 'xls') {
          this.$message.warning('只能上传后缀是.xlsx或者.xls的文件');
          return 
        }
        // 限制上传文件的大小
        if(size > 3*1024) {
          this.$message.warning('文件大小不得超过3G');
          return 
        }
      },
      // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
      handleChange(file, fileList){
          this.fileList.push(file.raw)
      },
      // 文件超出个数限制时的钩子
      handleExceed(file,fileList) {
          return this.$message.warning('一次只能上传一个文件哦~')
      },
      //因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
      UploadUrl() {
          return ""
      },
      // 文件列表移除文件时的钩子
      handleRemove(file,fileList) {
          this.fileList = fileList
      }
    },
    created:function () {
        // 回车搜索
        this.$api.common.returnSearchMethod(this.searchClick)
    },
    mounted() {
      this.getData();
    },
}
</script>

<style lang="less" scoped>
.common_title {
    margin-top: 20px;
}
.query_bg {
    float: right;
    margin-right: 60px;
    height: 80px;
    line-height: 80px;
    margin-top: 10px;
    //   background-color: hotpink;
    .el-button--goon {
      color: #FFF;
      background-color: #37508D;
      border-color: #37508D;
    }

    .el-input, .el-select {
        width: 140px;
    }
}

.dataList_bg {
      height: 90%;
      margin-top: 5px;
    //   background-color: lawngreen;
}

</style>
